<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Https://at.alicdn.com/t/c/font_4609705_66seta8i3c7.css">
</head>

<body>
    <style>
        .iconfont {
            color: #ccc;
        }

        .orange {
            color: orangered;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .zi {
            width: 120px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
            margin: 10px;
            line-height: 30px;
        }

        .biankuang {
            border-color: red;
        }
    </style>
    <div id="fei" style="width: 800px;height: 600px;border: 2px solid red;margin: auto;">
        <div>
            <h1>给"新闻订单"的评价</h1>
        </div>
        <div class="afei">
            <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
            <span class="iconfont icon-shoucang" @mouseover="a1=1" @mouseout="a1=0" @click="a=1" :class="{orange:a>=1 || a1>=1}"></span>
            <span class="iconfont icon-shoucang" @mouseover="a1=2" @mouseout="a1=0" @click="a=2" :class="{orange:a>=2 || a1>=2}"></span>
            <span class="iconfont icon-shoucang" @mouseover="a1=3" @mouseout="a1=0" @click="a=3" :class="{orange:a>=3 || a1>=3}"></span>
            <span class="iconfont icon-shoucang" @mouseover="a1=4" @mouseout="a1=0" @click="a=4" :class="{orange:a>=4 || a1>=4}"></span>
            <span class="iconfont icon-shoucang" @mouseover="a1=5" @mouseout="a1=0" @click="a=5" :class="{orange:a>=5 || a1>=5}"></span>
            <span v-show="a===1 || a1===1">差评</span>
            <span v-show="a===2 || a1===2">较差</span>
            <span v-show="a===3 || a1===3">中等</span>
            <span v-show="a===4 || a1===4">一般</span>
            <span v-show="a===5 || a1===5">优秀</span>
        </div>
        <div>
            <p>本次交易，乖，摸摸头 给您留下了什么印象呢？</p>
        </div>
        <div class="Afei" style="width: 600px;display: flex;justify-content: flex-start;flex-wrap: wrap;margin: auto;">
            <a href="">
                <div class="zi" @click.prevent="b=!b" :class="{biankuang:b===true}">专业水平高</div>
            </a>
            <a href="">
                <div class="zi" @click.prevent="c=!c" :class="{biankuang:c===true}">专业水平高</div>
            </a>
            <a href="">
                <div class="zi" @click.prevent="d=!d" :class="{biankuang:d===true}">专业水平高</div>
            </a>
            <a href="">
                <div class="zi" @click.prevent="e=!e" :class="{biankuang:e===true}">专业水平高</div>
            </a>
            <a href="">
                <div class="zi" @click.prevent="f=!f" :class="{biankuang:f===true}">专业水平高</div>
            </a>
            <a href="">
                <div class="zi" @click.prevent="g=!g" :class="{biankuang:g===true}">专业水平高</div>
            </a>
        </div>
        <div style="margin: auto;width: 600px;height: 200px;">
            <textarea style="width: 600px;height: 200px;" type="text" v-model="xianzi" maxlength="200"></textarea>
            <span>还可以输入{{200-xianzi.length}}字</span>
        </div>
        <button @click="baga=1" >评价完成</button>
        <div v-show="baga===1">感谢您的评价！么么哒(* ￣3)(ε￣ *)</div>

    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            let a = ref(0)
            let a1 = ref(0)
            let aa = ref('orange')
            let aaa = ref('biankuang')
            let b = ref(false)
            let c = ref(false)
            let d = ref(false)
            let e = ref(false)
            let f = ref(false)
            let g = ref(false)
            let xianzi = ref('')
            let baga = ref(0)
            return {
                a,
                aa,
                aaa,
                b,c,d, e, f, g,a1,
                xianzi,
                baga
            }
        }
    }).mount('#fei')
</script>

</html>